<template>
  <div class="admission-ticket">
    <img class="card-bg" src="https://imgs.bestwehotel.com/images/inn/1bqPTfwR8i" alt="">
    <div class="qr-top">
      <div class="qr-title"><img class="qr-code-icon" src="https://imgs.bestwehotel.com/images/inn/1bqPWym2fu" alt=""><span class="title">入园凭证</span></div>
      
      <!-- TODO 根据凭证码类型显示 -->
      <p class="qr-desc" v-if="multipleCode">该产品购买后一个客人一个核销码，该订单内的游客凭自凭证码入园</p>
      <p v-else class="desc">该产品购买后只会收到一个凭证码，该订单内的全部游客均可使用该凭证码入园</p>
    </div>

    <div class="qr-bottom">
      <scroll-view class="scroll-view" scroll-x>
        <div 
        class="name-tag" 
        :class="{active:currentIndex === index}" 
        v-for="(item, index) in names" 
        :key="item.id"
        @click="currentIndex = index">
          凭证{{index + 1}}
        </div>
      </scroll-view>
      <div v-if="voucherCodes.length">
        <template v-if="voucherCodes[currentIndex].type === 1">
          <p class="code-name">确认码</p>
          <p class="code-number">{{voucherCodes[currentIndex].code}}</p>
        </template>

        <template v-if="voucherCodes[currentIndex].type === 2">
          <img class="qr-code" :src="voucherCodes[currentIndex].code" alt="生成的二维码">
          <p class="code-name">确认单</p>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'voucher-info',
  props: {
    voucherCodes: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      currentIndex: 0
    }
  },

  computed: {
    multipleCode() {
      return this.voucherCodes && this.voucherCodes.length >= 2
    }
  }
}
</script>
<style lang="less">
.admission-ticket {
  position: relative;
    width: 710rpx;
    padding: 48rpx 60rpx 0;
    margin: 0 auto;

    color: #666;
    min-height: 678rpx;
    
    border-radius: 16rpx;
    background-color: #fff;
    box-sizing: border-box;

    .card-bg {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      width: 680rpx;
      height: 648rpx;
    }
    // .card-body {
    //   width: 100%;
    // }

    .qr-code-icon {
      width: 26rpx;
      height: 26rpx;
    }

    .qr-top {
      position: relative;
      z-index: 1;

      .qr-title {
        .flex;
        .flex-middle;
        font-size: 28rpx;
        height: 44rpx;

        .title {
          margin-left: 20rpx;
        }

      }
      
      .qr-desc {
        font-size: 20rpx;
        line-height: 32rpx;
        color: #666666;
        margin-top: 6rpx;
      }

      .qr-icon {
        width: 26rpx;
        height: 26rpx;
        // background-image: url(../../common/images/qr-icon.png);
        // background-size: 100% 100%;
        display: inline-block;
        margin-right: 10rpx;
      }
    }

    .qr-bottom {
      position: relative;
      z-index: 1;
      height: 50rpx;
      text-align: center;
      background-size: 100% 100%;

      .scroll-view {
        width: 100%;
      }

      .name-tag {
        height:64rpx;
        font-size:24rpx;
        
        margin-right:20rpx;
        margin-bottom:20rpx;
        border-radius:32rpx;
        color: @font_color;
        background: #F1F4F9;
        border: 1px solid #F1F4F9;        
        
        &.active{
          color: @theme_color;
          border: none;
          background: @theme_color;
        }
      }

      .code-name {
        font-size: 32rpx;
      }

      .code-number {
        font-size: 48rpx;
        color: @theme_color;
        font-weight: bold;
      }

      .qr-code {
        width: 312rpx;
        height: 305rpx;
        margin-top: 30rpx;
      }
    }
  }
</style>